﻿@model MvcCmsOptIn.Models.OptInModel
@section HtmlHead{
    <link href="@Url.Content("/content/ckeditor.css") rel="stylesheet" type="text/css" />
    <link href="@Url.Content("/RazorThemes/" + Model._Portal.SkinName + "/css/optin.css")" rel="stylesheet" type="text/css" />
}
<div class="contentpage-outerdiv">
    <div id="container">
        <div class="breadcrumb">
            <span><a href="/optin-manager">Main Menu</a></span><span>» </span><span><a href="/optin-manager/newsletters">
                News Letters</a></span><span>» </span><span>Add</span>
        </div>
        <div style="color: Red;">@ViewBag.Message &nbsp;</div>
        <div>
            [<a href="/optin-manager/editnewsletter" id="lnkNew">Add</a>]
            [<a href="/optin-manager/links/@Model._NewsLetter.NewsLetterID" id="lnkLinks">Links</a>]
            [<a href="javascript:void(0);" onclick="SaveNewsLetter();" id="lnkSave">Save</a>] <img style="display:none;" id="saving" src="/content/images/busy.gif" /> <span id="editReplyMessage"></span>
        </div>
        <h2>
            Newsletter Details</h2>
        <form id="form1" action="" method="post">
        <div id="header_container">
            <table width="100%">
                <tbody>
                    <tr>
                        <td class="formtitle">
                            <span id="lblName">News Letter Title</span>
                        </td>
                        <td class="formdata">
                            <input type="text" style="width: 80%;" id="Name" value="@Model._NewsLetter.Name" name="Name">
                        </td>
                    </tr>
                    <tr>
                        <td class="formtitle">
                            <span id="lblSubject">Subject</span>
                        </td>
                        <td class="formdata">
                            <input type="text" style="width: 80%;" id="Subject" value="@Model._NewsLetter.Subject" name="Subject">
                        </td>
                    </tr>
                    <tr valign="top">
                        <td class="formtitle">
                            <span id="lblRecipients">Recipients</span>
                        </td>
                        <td class="formdata">
                            <table style="width: 400px; font-size: 9px;">
                                <tbody>
                                    <tr>
                                        <td style="text-align: left; padding-left: 20px; width: 50%;">
                                            &nbsp;
                                        </td>
                                        <td style="text-align: left; padding-left: 40px; width: 50%; font-weight: bold;">
                                            Belongs to
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <span style="display: inline-block; width: 400px;" id="lstRecipients">
                                <table border="0" style="vertical-align: middle;">
                                    <tbody>
                                        <tr>
                                            <td valign="top">
                                            </td>
                                            <td align="center" rowspan="2">
                                                <select class="recipients_select" id="availableRecipients" multiple="multiple" name="availableRecipients" size="4">
                                                @if (Model._Lists != null)
                                                {
                                                    foreach (var list in Model._Lists)
                                                    {
                                                    <option value="@list.ListID">@list.ListName</option>
                                                    }
                                                }
                                                else
                                                {
                                                   <option>No Lists!!</option>
                                                   <option>Make Some Now!!</option>
                                                }
                                                </select>
                                            </td>
                                            <td width="100px" align="center" rowspan="2">
                                                <input type="button" id="toRight" value="&gt;&gt;"><br>
                                                <input type="button" id="toLeft" value="&lt;&lt;">
                                            </td>
                                            <td align="center" rowspan="2">
                                                <select class="recipients_select" multiple="multiple" id="currentRecipients" name="currentRecipients" size="4">
                                                @if (Model._AssignedLists != null)
                                                {
                                                    foreach (var list in Model._AssignedLists)
                                                    {
                                                    <option value="@list.ListID">@list.ListName</option>
                                                    }
                                                }
                                                </select>
                                            </td>
                                            <td valign="top">
                                                <img src="/content/images/busy.gif" style="display:none;" id="savingList" />
                                            </td>
                                        </tr>
                                        <tr>
                                            <td valign="bottom">
                                            </td>
                                            <td valign="bottom">
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <td class="formtitle">
                            <span id="lblFromName">From Name</span>
                        </td>
                        <td class="formdata">
                            <input type="text" style="width: 80%;" id="FromName" name="FromName" value="@Model._NewsLetter.FromName">
                        </td>
                    </tr>
                    <tr>
                        <td class="formtitle">
                            <span id="lblFrom">Reply To Email</span>
                        </td>
                        <td class="formdata">
                            <input type="text" style="width: 80%;" value="@Model._NewsLetter.FromEmail" id="FromEmail" name="FromEmail">
                        </td>
                    </tr>
                    <tr>
                        <td width="100" class="formtitle">
                            <span id="lblStatus">Status</span>
                        </td>
                        <td width="700" class="formdata">
                            <span id="lblCurrentStatus">@Model._NewsLetter.Status</span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div id="add_header_container">
            <h2>
                Add</h2>
        </div>
        <div id="html_container">
            @Html.TextArea("HTML", Model._NewsLetter.HTML)
        </div>
        </form>
    </div>
</div>
@Html.Hidden("NewsLetterID", @Model._NewsLetter.NewsLetterID)
@section ScriptContent{
    <script src="@Url.Content("/scripts/MvcCmsImageManager.js")" type="text/javascript"></script>
    <script src="@Url.Content("/scripts/ckeditor/ckeditor.js")" type="text/javascript"></script>
    <script src="@Url.Content("/scripts/ckeditor.js")" type="text/javascript"></script>
    <script src="@Url.Content("/areas/mvccmsoptin/Scripts/jquery.validate.js")" type="text/javascript"></script>
    <script id="Add/Remove List(s)" type="text/javascript">
        $(document).ready(function () {
            var suppliedSelect = jQuery('#availableRecipients');
            jQuery('#toRight').click(function () {
                suppliedSelect.find(':selected').each(function (index, elem) {
                    var selectElem = $(elem);
                    if (selectElem.val()) {
                        if ($("#NewsLetterID").val() == 0) { alert("Save the newsletter first"); return false; }
                        AddList(selectElem.val());
                        selectElem.appendTo('#currentRecipients');
                    }
                });
            });
        });
        $(document).ready(function () {
            var suppliedSelect = jQuery('#currentRecipients');
            jQuery('#toLeft').click(function () {
                suppliedSelect.find(':selected').each(function (index, elem) {
                    var selectElem = $(elem);
                    if (selectElem.val()) {
                        RemoveList(selectElem.val());
                        selectElem.appendTo('#availableRecipients');
                    }
                });
            });
        });
    </script>
    <script id="Add/RemoveList" type="text/javascript">
        function RemoveList(listId) {
            $("#savingList").show();
            $.post("/optinajax/removelistfromnewsletter/",
        { NewsLetterID: $('#NewsLetterID').val(), ListID: listId },
            function (data) {
                if (data.error) {
                    alert(data.error);
                }
                $("#savingList").hide();
            }, "json");
        }
        function AddList(listId) {
            $("#savingList").show();
            $.post("/optinajax/addlisttonewsletter/",
        {NewsLetterID: $('#NewsLetterID').val(),ListID: listId},
            function (data) {
                if (data.error) {
                    alert(data.error);
                }
                $("#savingList").hide();
            }, "json");
        }
    </script>
    <script id="Validation" type="text/javascript">
        $("#form1").validate({
            rules: {
                Name: { required: true },
                Subject: { required: true },
                FromName: { required: true },
                FromEmail: { required: true , email: true }//,
                //HTML: { required: true }  this is too buggy with ckeditor to use, guess if you want to send a blank email go ahead
            },
            messages: {
                Name: "NewsLetter Name Required",
                Subject: "Subject Required",
                FromName: "From Name is required.",
                //HTML: "Email Body is required.",
                FromEmail: {
                    email: "Invalid email address",
                    required: "From Email is required."
                }
            },
            errorElement: "div",
            wrapper: "div",  // a wrapper around the error message
            errorPlacement: function (error, element) {
                offset = element.offset();
                error.insertAfter(element)
                error.addClass('message');
                error.css('position', 'absolute');
                error.css('width', 190);
                error.css('left', 500);
                error.css('top', 0);
                var elementName = $(element).attr("name");
                switch (elementName) {
                    case "Name":
                        error.css('top', 100);
                        break;
                    case "Subject":
                        error.css('top', 130);
                        break;
                    case "FromName":
                        error.css('top', 270);
                        break;
                    case "FromEmail":
                        error.css('top', 300);
                        break;
                    case "HTML":
                        error.css('left', 550);
                        error.css('top', 480);
                        break;
                }
            }
        });
    </script>
    <script id="SaveNewsLetter" type="text/javascript">
        function SaveNewsLetter() {
            if ($("#form1").validate().form() == true) {
                $("#saving").show();
                $('#editReplyMessage').text('');
                var bodyVal = editor.getData();

                $.post("/optinajax/savenewsletter/",
                {
                    Name: $('#Name').val(),
                    Subject: $('#Subject').val(),
                    FromName: $('#FromName').val(),
                    FromEmail: $('#FromEmail').val(),
                    HTML: bodyVal,
                    NewsLetterID: $('#NewsLetterID').val()
                    },
                    function (data) {
                        if (data.error) {
                            alert(data.error);
                          $("#saving").hide();
                        }
                        else {
                          $("#saving").hide();
                          $('#editReplyMessage').text('The newsletter was saved.');
                          $('#NewsLetterID').val(data.newsLetterID);
                        }
                    },"json");
            }
        }
    </script>
    <script id="InitEditor" type="text/javascript">
        var editor;
        function ChangeEnter() {
            if (editor) { editor.destroy(true); }
            editor = CKEDITOR.replace('HTML',
        {
            enterMode: Number(1),
            shiftEnterMode: Number(2),
            height: "430"
        });
        MvcCmsImages.SetupCKEditor(editor);
        editor.on("instanceReady", function () {
            //set keyup event
            this.document.on("keyup", updateTextArea);
            //and paste event
            this.document.on("paste", updateTextArea);
        });
        }
        function updateTextArea() {
            CKEDITOR.tools.setTimeout(function () {
                $("#HTML").val(CKEDITOR.instances.HTML.getData());
                $("#HTML").trigger('keyup');
            }, 0);
        }
    </script>
    <script id="DocumentReady" type="text/javascript">
        $(document).ready(function () {
            ChangeEnter();
        });
    </script>
}
